<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./lib/react.js"></script>
    <script src="./lib/react_dom.js"></script>
    <script src="./lib/babel.js"></script>

    <script type="text/babel">
      class App extends React.Component {
        constructor() {
          super()
          this.state = {
            message: 'hello world',
            names: ['abc', 'cba', 'nba'],

            aaa: undefined,
            bbb: null,
            ccc: true,

            friend: {
              name: 'kobe',
            },

            lastName: 'kobe',
            firstName: 'abc',
            age: 18,
          }
        }

        render() {
          const { message, names } = this.state
          const { aaa, bbb, ccc } = this.state
          const { friend } = this.state
          const { lastName, firstName } = this.state
          const { age } = this.state

          const fullName = lastName + ' ' + firstName
          return (
            <div>
              {/* number,string,array，直接显示 */}
              <h2>{message}</h2>
              <h2>{names}</h2>

              {/* undefined，null，boolean, 不会显示出来，如果要显示这些值，需要转换成string类型，方法：String(), +'', .toString() */}
              <h2>{aaa}</h2>
              <h2>{bbb}</h2>
              <h2>{ccc}</h2>

              {/* object类型不能作为子元素进行显示 */}
              {/* <h2>{friend}</h2> */}

              {/* 插入表达式 */}
              <h2>{10 + 20}</h2>
              <h2>{fullName}</h2>
              <h2>{age >= 18 ? '成年人' : '未成年'}</h2>
            </div>
          )
        }
      }

      const root = ReactDOM.createRoot(document.querySelector('#root'))
      root.render(<App />)
    </script>
  </body>
</html>
